<template>
  <div class="admin-layout">
    <!-- 侧边栏 -->
    <aside class="sidebar">
      <div class="logo">
        <h2>商城管理系统</h2>
      </div>
      <nav class="nav-menu">
        <router-link to="/admin" class="nav-item" exact>
          <i class="fas fa-chart-line"></i>
          <span>仪表盘</span>
        </router-link>
        <router-link to="/admin/products" class="nav-item">
          <i class="fas fa-box"></i>
          <span>商品管理</span>
        </router-link>
        <router-link to="/admin/orders" class="nav-item">
          <i class="fas fa-shopping-cart"></i>
          <span>订单管理</span>
        </router-link>
        <router-link to="/admin/inventory" class="nav-item">
          <i class="fas fa-warehouse"></i>
          <span>库存管理</span>
        </router-link>
        <router-link to="/admin/delivery" class="nav-item">
          <i class="fas fa-truck"></i>
          <span>配送管理</span>
        </router-link>
        <router-link to="/admin/users" class="nav-item">
          <i class="fas fa-users"></i>
          <span>用户管理</span>
        </router-link>
        <router-link to="/admin/coupons" class="nav-item">
          <i class="fas fa-ticket-alt"></i>
          <span>优惠券管理</span>
        </router-link>
        <router-link to="/admin/promotions" class="nav-item">
          <i class="fas fa-percentage"></i>
          <span>促销活动管理</span>
        </router-link>
      </nav>
    </aside>

    <!-- 主要内容区 -->
    <div class="main-content">
      <!-- 顶部栏 -->
      <header class="header">
        <div class="header-left">
          <button class="toggle-btn" @click="toggleSidebar">
            <i class="fas fa-bars"></i>
          </button>
          <h2>{{ currentPageTitle }}</h2>
        </div>
        <div class="header-right">
          <div class="user-info">
            <span>{{ userStore.user?.username }}</span>
            <button class="logout-btn" @click="handleLogout">
              <i class="fas fa-sign-out-alt"></i>
              退出
            </button>
          </div>
        </div>
      </header>

      <!-- 页面内容 -->
      <main class="page-content">
        <router-view></router-view>
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const sidebarCollapsed = ref(false)

// 获取当前页面标题
const currentPageTitle = computed(() => {
  const routeTitles: Record<string, string> = {
    'Dashboard': '仪表盘',
    'ProductManagement': '商品管理',
    'OrderManagement': '订单管理',
    'Inventory': '库存管理',
    'Delivery': '配送管理',
    'UserManagement': '用户管理',
    'CouponManagement': '优惠券管理',
    'PromotionManagement': '促销活动管理'
  }
  return routeTitles[route.name as string] || '管理系统'
})

// 切换侧边栏
const toggleSidebar = () => {
  sidebarCollapsed.value = !sidebarCollapsed.value
}

// 退出登录
const handleLogout = async () => {
  userStore.logout()
  router.push('/login')
}
</script>

<style scoped>
.admin-layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 250px;
  background-color: #001529;
  color: white;
  transition: all 0.3s;
}

.sidebar.collapsed {
  width: 80px;
}

.logo {
  height: 64px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo h2 {
  margin: 0;
  color: white;
  font-size: 18px;
}

.nav-menu {
  padding: 16px 0;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: all 0.3s;
}

.nav-item:hover {
  color: white;
  background-color: #1890ff;
}

.nav-item.router-link-active {
  color: white;
  background-color: #1890ff;
}

.nav-item i {
  margin-right: 12px;
  width: 16px;
  text-align: center;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
}

.header {
  height: 64px;
  background-color: white;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.header-left {
  display: flex;
  align-items: center;
}

.toggle-btn {
  margin-right: 16px;
  border: none;
  background: none;
  font-size: 18px;
  cursor: pointer;
  color: #666;
}

.header-right {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logout-btn {
  border: none;
  background: none;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s;
}

.logout-btn:hover {
  background-color: #f0f0f0;
  color: #1890ff;
}

.page-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}
</style> 